<template>
  <div id="app">
    <el-main>
      <div id="box">
        <el-steps class="mini_box" :active="active" align-center>
          <el-step
            v-for="title in titles"
            :key="title"
            :title="title"
          ></el-step>
        </el-steps>

        <!-- 进行到第一步时 -->

        <div
          v-show="active == 1"
          style="width: 300px; margin: 30px auto; text-align: center"
        >
          <el-form label-width="100px" :model="secondForm">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="secondForm.phone" placeholder="输入手机号" />
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item label="滑块验证：">
              <div class="drag" ref="dragDiv">
                <div class="drag_bg"></div>
                <div class="drag_text">{{ confirmWords }}</div>
                <div
                  ref="moveDiv"
                  @mousedown="mouseDownFn($event)"
                  :class="{ handler_ok_bg: confirmSuccess }"
                  class="handler handler_bg"
                  style="position: absolute; top: 0px; left: 0px"
                ></div>
              </div>
            </el-form-item>
            <el-row>
              <el-button
                id="btn"
                style="
                  margin-top: 20px;
                  background: rgb(250, 22, 75);
                  color: #fff;
                  width: 180px;
                "
                size="medium"
                round
                @click="checkPhone"
                >下一步</el-button
              >
            </el-row>
          </el-form>
        </div>
        <!-- 进行到第二步时 -->
        <div
          v-show="active == 2"
          style="width: 300px; margin: 30px auto; text-align: center"
        >
          <!-- 密码验证开始 -->
          <el-form :model="secondForm" :rules="rules" label-width="100px">
            <el-form-item label="密码" prop="pwd">
              <el-input
                show-password
                v-model="secondForm.pwd"
                placeholder="输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="pwd2">
              <el-input
                show-password
                v-model="secondForm.pwd2"
                placeholder="请再次输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-row>
            <el-button
              id="btn"
              style="
                margin-top: 20px;
                background: rgb(250, 22, 75);
                color: #fff;
                width: 180px;
              "
              size="medium"
              round
              @click.native="checkPwd"
              >提交</el-button
            >
          </el-row>
        </div>
        <!-- 进行到第三步时 -->
        <div v-show="active == 3" id="step3">
          <img id="img" src="../assets/img_xxy/correct.png" alt="" />
          <div id="font">
            <h2>注册成功!</h2>
            <p>恭喜成为秋游记会员</p>
            <p>您可以登录网页跳转首页</p>
          </div>
        </div>
        <div id="dl" @click="$router.push('/reg/denglu')">立即登录</div>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      beginClientX: 0 /*距离屏幕左端距离*/,
      mouseMoveState: false /*触发拖动状态  判断*/,
      maxWidth: "" /*拖动最大宽度，依据滑块宽度算出来的*/,
      confirmWords: "向右拖动滑块验证" /*滑块文字*/,
      confirmSuccess: false,
      active: 1,
      titles: ["填写手机号验证", "设置密码", "注册完成"],
      secondForm: {
        phone: "",
        pwd: "",
        pwd2: "",
      },
      rules: {
        phone: [
          { required: true, message: "手机号码为必填项", trigger: "blur" },
        ],
        // 定义验证规则
        pwd: [
          // required-必填                         trigger-触发
          { required: true, message: "密码为必填项", trigger: "blur" },
          // pattern-验证格式
          { pattern: /^\d{6}$/, message: "必须6位数字", trigger: "blur" },
        ],
        pwd2: [
          // required-必填                         trigger-触发
          { required: true, message: "确认密码为必填项", trigger: "blur" },
          // pattern-验证格式
          { pattern: /^\d{6}$/, message: "必须6位数字", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.maxWidth =
      this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
    document
      .getElementsByTagName("html")[0]
      .addEventListener("mousemove", this.mouseMoveFn);
    document
      .getElementsByTagName("html")[0]
      .addEventListener("mouseup", this.moseUpFn);
  },
  methods: {
    // ping +
    getReg() {
      let url = `http://127.0.0.1:3000/v1/users/reg`;
      let params = `phone=${this.secondForm.phone}&upwd=${this.secondForm.pwd}`;

      console.log("params:", params);
      this.axios.post(url, params).then(res => {
        console.log(res);
      });
    },
    checkPwd() {
      this.getReg();
      if (
        /^\d{6}$/.test(this.secondForm.pwd) &&
        this.secondForm.pwd == this.secondForm.pwd2
      ) {
        this.next();
      } else {
        this.pwderr();
      }
    },
    checkPhone() {
      if (/^1[3-9]\d{9}$/.test(this.secondForm.phone)) {
        this.next();
      } else {
        this.phoneerr();
      }
    },
    mouseDownFn: function (e) {
      if (!this.confirmSuccess) {
        e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
        this.mouseMoveState = true;
        this.beginClientX = e.clientX;
      }
    },
    //验证成功函数(验证滑动块)
    successFunction() {
      this.confirmSuccess = true;
      this.confirmWords = "验证通过";
      document.getElementsByClassName("drag_text")[0].style.color = "#fff";
      document.getElementsByClassName("handler")[0].style.left =
        this.maxWidth + "px";
      document.getElementsByClassName("drag_bg")[0].style.width =
        this.maxWidth + "px";
      if (window.addEventListener) {
        document
          .getElementsByTagName("html")[0]
          .removeEventListener("mousemove", this.mouseMoveFn);
        document
          .getElementsByTagName("html")[0]
          .removeEventListener("mouseup", this.moseUpFn);
        return true;
      } else {
        document
          .getElementsByTagName("html")[0]
          .removeEventListener("mouseup", () => {});
        return false;
      }
    },
    //mousemove事件(验证滑动块)
    mouseMoveFn(e) {
      if (this.mouseMoveState) {
        let width = e.clientX - this.beginClientX;
        if (width > 0 && width <= this.maxWidth) {
          document.getElementsByClassName("handler")[0].style.left =
            width + "px";
          document.getElementsByClassName("drag_bg")[0].style.width =
            width + "px";
        } else if (width > this.maxWidth) {
          this.successFunction();
        }
      }
    },
    //mouseup事件(验证滑动块)
    moseUpFn(e) {
      this.mouseMoveState = false;
      var width = e.clientX - this.beginClientX;
      if (width < this.maxWidth) {
        document.getElementsByClassName("handler")[0].style.left = 0 + "px";
        document.getElementsByClassName("drag_bg")[0].style.width = 0 + "px";
      }
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    pwderr() {
      this.$alert("两次输入密码不同,请重试", "", {
        confirmButtonText: "确定",
        callback: action => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    phoneerr() {
      this.$alert("手机号码格式不正确或未填,请重试", "", {
        confirmButtonText: "确定",
        callback: action => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.drag {
  position: relative;
  background-color: #e8e8e8;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.handler {
  width: 40px;
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: move;
}
.handler_bg {
  background: #fff
    url("")
    no-repeat center;
}
.handler_ok_bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #fff
    url("")
    no-repeat center;
}
.drag_bg {
  background-color: #7ac23c;
  height: 38px;
  width: 0px;
  border-radius: 4px 0 0 4px;
}
.drag_text {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
* {
  margin: 0;
  padding: 0;
}
.form-wrapper {
  margin-top: 50px;
  width: 500px;
}
#app {
  margin: 0 auto;
  width: 1980px;
  height: 548px;
  background: url("../assets/img_xxy/beijing.jpg") no-repeat center;
  #box {
    position: fixed;
    left: 32%;
    width: 580px;
    height: 360px;
    background: #fff;
    margin: 0 auto;
    margin-top: 80px;
    border-radius: 10px;
    padding: 0 30px;
    box-shadow: 0 0 10px #ccc;
    font-size: 14px;
    #dl {
      position: absolute;
      bottom: 20px;
      right: 30px;
      color: #999;
    }

    .mini_box {
      padding-top: 30px;
      font-size: 14px;
    }
    .el-step__title {
      font-size: 14px;
    }
    #step3 {
      display: flex;
      position: fixed;
      left: 45%;
      width: 350px;
      height: 100px;
      margin: 0 auto;
      margin-top: 100px;
      #img {
        width: 100px;
        // height: 50%;
      }
      #font {
        h2 {
          color: rgb(18, 150, 219);
        }
        margin-left: 10px;
      }
    }
  }
}
</style>
